import React from 'react';
import CouponItem from './CouponItem';
import { fetchCouponListApi } from '../api';
import './index.less';

export default class Coupon extends React.PureComponent {
  state = {
    nomalData: [],
    usedData: [],
    expiredData: []
  }
  componentDidMount() {
    fetchCouponListApi({ type: 0 }).then(({ data }) => {
      data && this.setState({ nomalData: data })
    })
    fetchCouponListApi({ type: 1 }).then(({ data }) => {
      data && this.setState({ usedData: data })
    })
    fetchCouponListApi({ type: 2 }).then(({ data }) => {
      data && this.setState({ expiredData: data })
    })
  }

  render() {
    const { nomalData, usedData, expiredData } = this.state;
    return (
      <div className="account-block">
        <div className="account-block__title">
          我的优惠券
        </div>
        <div className="account-block__content coupon">
          {
            nomalData.map((item, index) =>(
              <CouponItem item={item} key={index} />
            ))
          }
          {
            usedData.map((item, index) =>(
              <CouponItem item={item} isUsed key={index} />
            ))
          }
          {
            expiredData.map((item, index) =>(
              <CouponItem item={item} isExpired key={index} />
            ))
          }
          {!nomalData.length && !usedData.length && !expiredData.length && <p className="text-center">暂无数据</p> }
        </div>
      </div>
    )
  }
}